img {
  max-width: 100%;
  height: auto;
}

.home__img img {
  width: 230px;
  animation: floaty 1.8s infinite alternate;
}



.home__shadow {
  width: 130px;
  height: 24px;
  background-color: #414040;
  margin: 0 auto;
  border-radius: 50%;
  filter: blur(7px);
  animation: shadow 1.8s infinite alternate;
}



@keyframes floaty {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(15px);
  }
}

@keyframes shadow {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(.85, .85);
  }
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
  .home {
    padding-top: 7rem;
  }
}

/* For medium devices */
@media screen and (min-width: 767px) {
  .nav {
    height: calc(var(--header-height) + 1.5rem);
  }
  .nav__toggle, 
  .nav__close {
    display: none;
  }
  .nav__list {
    flex-direction: row;
    column-gap: 3.5rem;
  }
}

/* For large devices */
@media screen and (min-width: 1024px) {
  .home__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    column-gap: 2rem;
  }
  .home__data {
    text-align: initial;
  }
  .home__img img {
    width: 400px;
  }
  .home__shadow {
    width: 250px;
    height: 40px;
  }
}

@media screen and (min-width: 1048px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
}

/* For 2K resolutions (2048 x 1152, 2048 x 1536) */
@media screen and (min-width: 2048px) {
  body {
    zoom: 1.7;
  }

  .home {
    height: initial;
    row-gap: 4rem;
  }
}

/* For 4K resolutions (3840 x 2160, 4096 x 2160) */
@media screen and (min-width: 3840px) {
  body {
    zoom: 3.1;
  }
}